
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { X } from "lucide-react";
import { useState } from "react";
import { toast } from "@/components/ui/sonner";
import { Profile } from "@/types/profile";

interface ProfileInfoProps {
  profile: Profile;
  onProfileUpdate: (profile: Profile) => void;
}

export const ProfileInfo = ({ profile, onProfileUpdate }: ProfileInfoProps) => {
  const [newInterest, setNewInterest] = useState("");
  
  const addInterest = () => {
    if (!newInterest.trim()) return;
    
    if (profile.interests.includes(newInterest.trim())) {
      toast.error("This interest is already in your profile");
      return;
    }
    
    if (profile.interests.length >= 8) {
      toast.error("You can add up to 8 interests");
      return;
    }
    
    onProfileUpdate({
      ...profile,
      interests: [...profile.interests, newInterest.trim()]
    });
    setNewInterest("");
    toast.success("Interest added to your profile");
  };
  
  const removeInterest = (interest: string) => {
    onProfileUpdate({
      ...profile,
      interests: profile.interests.filter(item => item !== interest)
    });
    toast.success("Interest removed from your profile");
  };
  
  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    const { name, value } = e.target;
    onProfileUpdate({
      ...profile,
      [name]: value
    });
  };
  
  const handleSave = () => {
    toast.success("Profile updated successfully");
  };

  return (
    <Card>
      <CardHeader>
        <CardTitle>Your Profile</CardTitle>
        <CardDescription>
          Manage your profile information and interests
        </CardDescription>
      </CardHeader>
      <CardContent className="space-y-4">
        <div className="space-y-2">
          <Label htmlFor="name">Name</Label>
          <Input
            id="name"
            name="name"
            value={profile.name}
            onChange={handleChange}
          />
        </div>
        
        <div className="space-y-2">
          <Label htmlFor="email">Email</Label>
          <Input
            id="email"
            name="email"
            type="email"
            value={profile.email}
            onChange={handleChange}
          />
        </div>
        
        <div className="space-y-2">
          <Label htmlFor="bio">Bio</Label>
          <Textarea
            id="bio"
            name="bio"
            value={profile.bio}
            onChange={handleChange}
            rows={4}
          />
        </div>
        
        <div className="space-y-2">
          <Label htmlFor="interests">Interests</Label>
          <div className="flex flex-wrap gap-2 mb-2">
            {profile.interests.map(interest => (
              <Badge key={interest} className="px-2 py-1 flex items-center gap-1">
                {interest}
                <button 
                  onClick={() => removeInterest(interest)}
                  className="ml-1 rounded-full hover:bg-muted p-0.5"
                >
                  <X className="w-3 h-3" />
                </button>
              </Badge>
            ))}
          </div>
          <div className="flex gap-2">
            <Input
              id="interest"
              value={newInterest}
              onChange={(e) => setNewInterest(e.target.value)}
              placeholder="Add a new interest"
              className="flex-1"
            />
            <Button onClick={addInterest} type="button">Add</Button>
          </div>
        </div>
        
        <div className="pt-4">
          <Button onClick={handleSave} className="w-full">
            Save Changes
          </Button>
        </div>
      </CardContent>
    </Card>
  );
};
